﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Examples</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <link href="../Content/bootstrap-theme.css" rel="stylesheet" />
    <style>
        #gridContainer {
            padding: 20px;
        }

        .grid-row > div {
            border: 1px solid lightgrey;
            padding: 10px;
            background-color: aliceblue;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="panel">
        <h3 class="panel-header">
            Grid Layout
        </h3>

        <div id="gridContainer">

            <div class="row grid-row">
                <div class="col-sm-3">3</div>
                <div class="col-sm-4">4</div>
                <div class="col-sm-5">5</div>
            </div>

            <div class="row grid-row">
                <div class="col-sm-6">6</div>
                <div class="col-sm-6">6</div>
            </div>

            <div class="row grid-row">
                <div class="col-sm-11">11</div>
                <div class="col-sm-1">1</div>
            </div>
        </div>
    </div>

    <div class="panel">
        <h3 class="panel-header">
            Form Element
        </h3>

        <div class="form-group">
            <label>Name:</label>
            <input name="name" class="form-control" />
        </div>

        <div class="form-group">
            <label>Email:</label>
            <input name="email" class="form-control" />
        </div>

        <div class="radio">
            <label>
                <input type="radio" name="junkmail" value="no" />
                No, I never want to hear from you again
            </label>
        </div>

        <div class="checkbox">
            <label>
                <input type="checkbox" value="" />
                I agree to the terms and conditions.
            </label>
        </div>

        <input type="button" value="Subcribe" class="btn btn-primary" />
    </div>

    <div class="panel">
        <h3 class="panel-heading">Standard Table with Context</h3>
        <table class="table">
            <thead>
                <tr>
                    <th>Country</th>
                    <th>Capital City</th>
                </tr>
            </thead>
            <tr class="success">
                <td>United Kingdom</td>
                <td>London</td>
            </tr>
            <tr class="danger">
                <td>France</td>
                <td>Paris</td>
            </tr>
            <tr>
                <td>Spain</td>
                <td class="warning">Madrid</td>
            </tr>
        </table>
    </div>

    <div class="panel">
        <h3 class="panel-heading">Striped, Bordered and Highlighted Table</h3>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th>Country</th>
                    <th>Capital City</th>
                </tr>
            </thead>
            <tr>
                <td>United Kingdom</td>
                <td>London</td>
            </tr>
            <tr>
                <td>France</td>
                <td>Paris</td>
            </tr>
            <tr>
                <td>Spain</td>
                <td>Madrid</td>
            </tr>
        </table>
    </div>

    <div class="panel">
        <h3 class="panel-heading">Button Styles</h3>
        <button class="btn">Basic Button</button>
        <button class="btn btn-primary">Primay</button>
        <button class="btn btn-success">Success</button>
        <button class="btn btn-warning">Warning</button>
        <button class="btn btn-info">Info</button>
        <button class="btn btn-danger">Danger</button>
    </div>

    <div class="well">
        <h3 class="panel-heading">Button Sizes</h3>
        <button class="btn btn-lg btn-success">Large Success</button>
        <button class="btn btn-warning">Standard Waring</button>
        <button class="btn btn-sm btn-danger">Small Danger</button>
    </div>

    <div class="well">
        <h3 class="panel-heading">Block Buttons</h3>
        <button class="btn btn-block btn-lg btn-success">Large Block Success</button>
        <button class="btn btn-block btn-warning">Standard Block Warning</button>
        <button class="btn btn-block btn-sm btn-info">Samll Block Info</button>
    </div>
</body>
</html>
